<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
        style="border:1px solid #000000;">
</canvas>
<canvas id="myCanvas1" width="200" height="100"
        style="border:1px solid #000000;">
</canvas>
<canvas id="myCanvas2" width="200" height="100"
        style="border:1px solid #000000;">
</canvas>
<canvas id="myCanvas3" width="200" height="100"
        style="border:1px solid #000000;">
</canvas>
<span>将画画到画布上</span>
<canvas id="myCanvas4" width="200" height="100"
        style="border:1px solid #000000;">
</canvas>
<img src="./img/1_caitou.jpg" alt="" id="img_1">
</body>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    ctx.fillText("Hello World",10,50);
</script>
<script>
    var c=document.getElementById("myCanvas1");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    ctx.strokeText("Hello World",10,50);
</script>
<script>
    var c=document.getElementById("myCanvas2");
    var ctx=c.getContext("2d");

    // 创建渐变
    var grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");

    // 填充渐变
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);

</script>
<script>
    var c=document.getElementById("myCanvas3");
    var ctx=c.getContext("2d");

    // 创建渐变
    var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");

    // 填充渐变
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>
<script>
    var c=document.getElementById("myCanvas4");
    var ctx=c.getContext("2d");
    var img=document.getElementById("img_1");
    ctx.drawImage(img,10,10);
</script>

</html>